<template>
  <view class="container" v-if="!isLoading">
    <view class="detail">
      <view class="card">
        <image :src="$xyfun.image(detail.card.bgimage)" class="card_bg"></image>
        <view class="info" :style="detail.card_id==4?'color: #6b6b6b !important;':''">
          <view class="slogan">{{ detail.card.slogan }}</view>
          <view class="title">{{ detail.card.title }}</view>
          <view class="overtime">
            {{$xyfun.dataFormat(detail.user_card.overtime)}}过期
          </view>
          <view class="rule" :style="'color:'+ detail.card.theme_color">{{ detail.card.desc }}></view>
        </view>
        <view class="right">
          <image :src="$xyfun.image(detail.card.image)"></image>
          <view class="buy" v-if="detail.card_id!==4" :style="'color:'+ detail.card.theme_color" @tap="$xyfun.to('/pages/card?id='+detail.card.id)">
            再次购买
          </view>
        </view>
      </view>

      <view class="order">
        <view class="title">全部权益</view>
        <view class="line" v-for="val in benfit" @tap="jump(val.benfit)">
          <view style="width: 100rpx">
            <text class="ts-20 m-r-20">x</text>{{val.nums}}/<text class="ts-22 tc-999" style="position: relative;top: 2rpx">{{val.orignal_nums}}</text>
          </view>
          <view class="label"><text class="m-r-20 tc-b" v-if="val.benfit.goods_id">{{val.benfit.goods_title}}</text>{{val.benfit.title}}</view>
        </view>
      </view>

      <view class="order">
        <view class="title">订单详情</view>
        <view class="line">
          <view class="label">订单号</view>
          <view class="value">{{detail.order_sn}}</view>
        </view>
        <view class="line">
          <view class="label">购买数量</view>
          <view class="value">x{{detail.nums}}</view>
        </view>
        <view class="line">
          <view class="label">下单时间</view>
          <view class="value">{{ $xyfun.timeFormat(detail.createtime) }}</view>
        </view>
        <view class="line">
          <view class="label">总计</view>
          <view class="value price">￥<text>{{detail.total_fee}}</text></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  components: {
  },
  data() {
    return {
      isLoading:true,
      id: '',
      detail: {},
      benfit: []
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    this.id = options.id;
    this.loadData();
  },

  methods: {
    async loadData(){

      this.$api.post({
        url: '/benfit_order/order_detail',
        loadingTip:'加载中...',
        data: {
          id : this.id
        },
        success: res => {
          this.detail = res;
          if(res.benfit){
            this.benfit = res.benfit;
          }
          this.isLoading = false;
        }
      });
    },

    jump(item){
      let id = item.id
      if(item.is_disable==1){
        return;
      }

      if(item.course_num>0){
        this.$xyfun.to('/pages/course_list');//课程权益
        return;
      }

      if(item.goods_id){
        this.$xyfun.to('/pages/shop/goods/detail?id='+item.goods_id);
        return;
      }

      this.$xyfun.to('/pages/benfit?id=' + id);
    }

  }
}
</script>

<style>
page{
  background: #f2f2f2;
}
</style>
<style scoped lang="scss">
.detail{
  .card {
    display: flex;
    justify-content: space-between;
    margin: 60rpx 20rpx 30rpx 20rpx;
    border-radius: 20rpx;
    height: 300rpx;
    position: relative;

    .card_bg {
      width: 100%;
      height: 300rpx;
      position: absolute;
      z-index: 0;
    }


    .info {
      z-index: 1;
      margin-top: 20rpx;
      color: #fff;
      margin-left: 50rpx;

      .slogan {
        font-size: 32rpx;
        font-weight: bold;
        margin-top: 20rpx;
      }

      .title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
        font-weight: bold;
      }

      .overtime {
        font-size: 20rpx;
        display: flex;
        align-items: center;
        height: 50rpx;

        .but {
          background: #fafdff;
          color: #49a78d;
          font-size: 26rpx;
          padding: 4rpx 20rpx;
          border-radius: 30rpx;
          margin-left: 20rpx;
        }
      }

      .rule {
        display: inline-block;
        margin-top: 44rpx;
        margin-left: -10rpx;
        height: 50rpx;
        line-height: 50rpx;
        border-radius: 30rpx;
        padding: 0 20rpx;
        font-size: 22rpx;
        background: linear-gradient(to right, #fff, #e1f4ff);
        color: #4e8295;
      }
    }

    .right {
      image {
        position: absolute;
        top: -40rpx;
        right: -20rpx;
        width: 230rpx;
        height: 180rpx;
      }

      .buy {
        border-radius: 30rpx;
        font-weight: bold;
        padding: 10rpx 10rpx;
        font-size: 26rpx;
        position: absolute;
        right: 20rpx;
        bottom: 40rpx;
        width: 180rpx;
        text-align: center;
        color: #2885a7;
        background: linear-gradient(to right, #fff, #ecf4fc, #fff);
      }
    }
  }

  .order{
    background: #fff;
    margin: 0 20rpx 20rpx 20rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    .title{
      display: flex;
      align-items: center;
      font-size: 30rpx;
      margin-bottom: 40rpx;
      &:before{
        content: '';
        display: block;
        height: 30rpx;
        width: 6rpx;
        background: #00a0ea;
        border-radius: 4rpx;
        margin-right: 20rpx;
      }
    }
    .line{
      display: flex;
      margin: 20rpx 0;
      justify-content: space-between;
      color: #6b6b6b;
      .label{
        font-size: 24rpx;
      }
      .value{
        font-size: 22rpx;
      }
      .price{
        text{
          color: red;
          font-weight: bold;
          font-size: 30rpx;
          margin-left: 4rpx;
        }
      }
    }
  }
}
</style>